<template>
    <div>
        <p class="tasks">已打卡数:{{todos.filter(todo => {return todo.done === '1'}).length}}</p>
        <p class="tasks">待打卡数:{{todos.filter(todo => {return todo.done === '0'}).length}}</p>
        <Todo v-for="(todo, index) in todos" :todo="todo" :key="index" @delete-todo="deleteTodo" @complete-todo="completeTodo"></Todo>
    </div>
</template>

<script>
import Todo from './Todo'
export default {
  props: ['todos', 'd'],
  components: {
    Todo
  },
  data () {
    return {
    }
  },
  methods: {
    deleteTodo (todo) {
      this.$swal({
        title: 'Are you sure?',
        text: 'This To-Do will be permanently deleted!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#FF0000',
        confirmButtonText: 'Yes, delete it',
        closeOnConfirm: false
      },
      () => {
        const todoIndex = this.todos.indexOf(todo)
        this.todos.splice(todoIndex, 1)
        this.$swal('Deleted!', 'Your To-Do has been deleted.', 'success')
      }
      )
    },
    completeTodo (todo) {
      let time = (new Date().getHours() < 10 ? '0' : '') + new Date().getHours() + '' +
        ':' + (new Date().getMinutes() < 10 ? '0' : '') + new Date().getMinutes() + '' +
        ':' + (new Date().getSeconds() < 10 ? '0' : '') + new Date().getSeconds()
      const todoIndex = this.todos.indexOf(todo)
      if (this.todos[todoIndex].title === '起床') {
        const _this = this
        _this.$axios.get('https://47744li119.goho.co/todos/insert/' + _this.d + '/' + time).then(function (resp) {
        })
      } else {
        const _this = this
        _this.$axios.get('https://47744li119.goho.co/todos/update/' + _this.d + '/' + _this.todos[todoIndex].title + '/' + time).then(function (resp) {
        })
      }
      this.todos[todoIndex].done = '1'
      this.todos[todoIndex].time = time
      this.$swal('成功!', '打卡完成!', 'success')
    }
  }
}
</script>

<style scoped>
    .tasks {
        text-align: center;
    }
</style>
